<template>
    <div class="lineChartBox" :id="id"></div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "funChart",
        props: {
            id: {
                type: String
            },
            times: {
                type: Array
            },
            chartDatas: {
                type: Array
            }
        },
        methods: {
            getOption() {
                let colorArr = ["#91959d", "#de7572", "#6a7dda"];
                let seriesArr = this.chartDatas.map((i, key) => {
                    return {
                        data: i.lineData,
                        name: i.name,
                        type: "line",
                        smooth: true,
                        symbol: "none",
                        lineStyle: {
                            color: colorArr[key],
                            width: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colorArr[key]
                            }, {
                                offset: 1,
                                color: "rgba(255,255,255,.0)"
                            }]),
                            origin: "start"
                        }
                    };
                });

                let option = {
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: this.time,
                        axisLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#f2f2f2"
                            }
                        },
                        minorTick: {
                            show: false
                        },
                        axisTick: {
                            show: false,
                            data: []
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#91959E",
                                fontSize: 10
                            },
                            align: "right"
                        }
                    },
                    color: ["#91959d", "#de7572", "#6a7dda"],
                    legend: {
                        show: true,
                        data: this.chartDatas.map(i => i.name),
                        icon: "rect",
                        itemWidth: 20,
                        itemHeight: 3,
                        bottom: 0
                    },
                    grid: {
                        top: 20,
                        bottom: 70,
                        left: 0,
                        right: 0
                    },
                    yAxis: {
                        type: "value",
                        position: "right",
                        axisLine: {
                            show: false //y轴线消失
                        },
                        axisTick: {
                            show: false //y轴坐标点消失
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#f2f2f2"

                            }
                        },
                        axisLabel: {
                            formatter: "{value}%",
                            textStyle: {
                                color: "#91959E ",
                                fontSize: 10
                            },
                            inside: true,
                            z: 100,
                            verticalAlign: "bottom"

                        }
                    },
                    series: seriesArr
                };
                return option;
            },
            showChart(){
                let myChart = echarts.init(document.getElementById(this.id));
                myChart.setOption(this.getOption());
                window.addEventListener("resize", () => {myChart.resize();});
            },
            getLineDraw() {
                let myChart = echarts.init(document.getElementById(this.id));
                myChart.setOption(this.getOption());
                return myChart.getDataURL();
            }
        },
        mounted() {
            this.showChart()
        }
    };
</script>

<style scoped>

</style>
